import TestInput from "./components/TestInput";
import {useCallback, useEffect, useRef, useState} from "react";
import ThemeContext from "./context/themeContext";
import Button from "./components/Button";
import "./assets/css/init.css";
// import classComponent from xxx
// 我们简单理解类组件是一个构造函数class classComponent ---> 是一个构造函数 new一个实例出来

// 我们简单理解类组件就是一个构造函数 class

function App() {
  console.log("TestInput", TestInput)
  const testInputRef = useRef(null);
  const counterRef = useRef(null)
  const [theme, setTheme] = useState("light")
  // console.log("divRef", divRef)
  // divRef首次渲染打印为null 当生成真实的dom时 ref属性变化不会造成组件的重新渲染
  // 因为useEffect是在真实dom形成之后才会执行
  useEffect(() => {
    console.log("divRef", testInputRef)
  })
  // const handlerClick = useCallback(() => {
  //   console.log("countRef", counterRef.current)
  //   // 获取真实dom
  //   //   testInputRef.current.focus();
  //   // console.log("00000", divElementRef);
  // }, [])
  const changeTheme = useCallback(() => {
    setTheme(prev => {
      if (prev === "light") return "dark"
      return "light"
    })
  }, [])

  // css 模块化 会帮你自动的处理掉样式覆盖的问题
  return (
    <div className='wrapper'>
      <ThemeContext.Provider value={theme}>
        {/*你在组件的两个标签中间写了一些东西， 你写的这些东西会被作为children这个props传递给子组件*/}
        <Button>
          登录
        </Button>
        {/*  <Counter ref={counterRef} defaultCount={10}/>*/}
        {/*<CounterNew/>*/}
        {/*<StudentList/>*/}
        {/*  /!*<ForceUpdateTest/>*!/*/}
        {/*  /!*<Ticker/>*!/*/}
        {/*  /!*给组件挂ref 函数组件就是一个函数， 函数的的执行无非可以得到两个东西： 1。函数的引用 2。返回值*!/*/}
        {/*  /!*函数的上下文随着函数的执行而创建，随着函数的执行完毕而销毁*!/*/}
        {/*  /!*返回值是要渲染到页面里的元素， 他能给你吗： 不能*!/*/}
        {/*  /!*react 类组件*!/*/}
        {/*  /!*但是有一种场景是有必要的， 我有没有可能个在这个父组件里想访问子组件的一些东西【这节课先说真实dom】*!/*/}
        {/*  <TestInput ref={testInputRef}/>*/}
        {/*  <TabView/>*/}
        {/*  <button onClick={changeTheme}>change theme</button>*/}
      </ThemeContext.Provider>
      {/*<TransitionCase/>*/}
    </div>
  )
}

console.log(<App/>)
export default App;
